<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <el-tabs v-model="tabName" @tab-click="changeType">
        <el-tab-pane label="按日统计" name="day">
          <div class="header">
            <div>
              <el-tooltip content="时间" placement="top">
                <el-date-picker
                  v-model="searchTerms.date"
                  :editable="false"
                  class="picker"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="timestamp"
                  @change="getData"/>
              </el-tooltip>
              <el-select v-if="queryMatch(234)" v-model="searchTerms.company_id" placeholder="请选择所属部门" class="select" clearable @change="getData">
                <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <!--不包含离职人员-->
              <el-select v-if="queryMatch(234)" v-model="searchTerms.user_id" placeholder="工作人员" class="select" clearable filterable @change="getData">
                <el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="searchTerms.status" placeholder="正常 | 异常" class="select" clearable @change="getData">
                <el-option label="正常" value="1" />
                <el-option label="异常" value="0" />
              </el-select>
            </div>
          </div>
          <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row @sort-change="handleSortChange">
            <el-table-column prop="time" label="日期" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="name" label="姓名" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="userid" label="企业微信账号" min-width="200" header-align="center" align="center"/>
            <el-table-column prop="company_name" label="部门" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="groupname" label="打卡规则" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="start_time" label="最早时间" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="end_time" label="最晚时间" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="count" label="次数" min-width="90" header-align="center" align="center"/>
            <el-table-column prop="exception_type" label="打卡状态" width="140" header-align="center" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row['exception_type']!=='正常'" type="danger">{{ scope.row['exception_type']==='未打卡'?'缺卡':'时间异常' }}</el-tag>
                <el-tag v-else type="success">{{ scope.row['exception_type'] }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="showDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="按月统计" name="month">
          <div class="header">
            <div>
              <el-tooltip content="时间" placement="top">
                <el-date-picker
                  v-model="searchTerms.date"
                  type="monthrange"
                  range-separator="-"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  value-format="timestamp"
                  @change="getData"/>
              </el-tooltip>
              <el-select v-model="searchTerms.company_id" placeholder="请选择所属部门" class="select" clearable @change="getData">
                <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <!--不包含离职人员-->
              <el-select v-model="searchTerms.user_id" placeholder="工作人员" class="select" clearable filterable @change="getData">
                <el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="searchTerms.status" placeholder="正常 | 异常" class="select" clearable @change="getData">
                <el-option label="正常" value="1" />
                <el-option label="异常" value="0" />
              </el-select>
            </div>
          </div>
          <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row @sort-change="handleSortChange">
            <el-table-column prop="time" label="日期" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="name" label="姓名" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="userid" label="企业微信账号" min-width="200" header-align="center" align="center"/>
            <el-table-column prop="company_name" label="部门" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="groupname" label="打卡规则" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="start_time" label="最早时间" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="end_time" label="最晚时间" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="count" label="次数" min-width="90" header-align="center" align="center"/>
            <el-table-column prop="exception_type" label="打卡状态" width="140" header-align="center" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row['exception_type']!=='正常'" type="danger">{{ scope.row['exception_type']==='未打卡'?'缺卡':'时间异常' }}</el-tag>
                <el-tag v-else type="success">{{ scope.row['exception_type'] }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="showDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" width="640" title="个人打卡记录">
      <el-table :data="personalData" border highlight-current-row>
        <el-table-column prop="checkin_time" label="打卡时间" min-width="160" header-align="center" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row['checkin_time'], '{y}-{m}-{d} {h}:{i}:{s}') }}
          </template>
        </el-table-column>
        <el-table-column prop="userid" label="企业微信账号" min-width="160" header-align="center" align="center"/>
        <el-table-column prop="groupname" label="打卡规则" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="checkin_type" label="打卡类型" min-width="100" header-align="center" align="center"/>
        <el-table-column prop="exception_type" label="打卡状态" min-width="100" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row['exception_type']!==''" type="danger">{{ scope.row['exception_type'] }}</el-tag>
            <el-tag v-else type="success">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="location_detail" label="地点" min-width="160" header-align="center" align="center"/>
        <el-table-column prop="notes" label="备注" min-width="70" header-align="center" align="center"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import { handleSortChange, handleSizeChange, handleCurrentChange, columnCheck, parseTime } from '../../../utils/table'
  export default {
    data() {
      return {
        tabName: 'day',
        searchTerms: {
          date: [],
          company_id: '',
          user_id: '',
          status: ''
        },

        usersList: [],
        companyList: [],

        // 表格相关数据
        tableMaxHeight: document.documentElement.clientHeight - 320,
        multipleSelection: [],
        tableLoading: false,
        tableData: [],

        dialogVisible: false,
        personalData: []
      }
    },
    watch: {
    },
    created() {
      this.searchTerms.date[0] = new Date(parseTime(new Date().getTime(), '{y}-{m}-{d}') + ' 00:00:00').getTime();
      this.searchTerms.date[1] = new Date().getTime();
      this.getData();
      this.getUsersList();
      this.getCompanyList();
    },
    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange, columnCheck, parseTime,
      changeType(tab) {
        if (tab.name === 'day') {
          this.searchTerms.date[0] = new Date(parseTime(new Date().getTime(), '{y}-{m}-{d}') + ' 00:00:00').getTime();
          this.searchTerms.date[1] = new Date().getTime();
        } else {
          const data = new Date();
          data.setDate(1);
          data.setHours(0);
          data.setSeconds(0);
          data.setMinutes(0);
          this.searchTerms.date[0] = data.getTime();
          this.searchTerms.date[1] = new Date().getTime();
        }
        this.getData();
      },
      /**
       *  获取公司列表
       *  接口:'company/all-list'
       */
      getCompanyList() {
        const url = 'company/all-list'
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.companyList = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
      getUsersList() {
        const url = 'user/all-list'
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.usersList = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      getData(order) {
        this.tableLoading = true
        order || (order = {})
        const url = 'hr/getPunchCardRecordList'
        const data = {
          startTime: this.searchTerms.date && (this.searchTerms.date[0] + '').slice(0, (this.searchTerms.date[0] + '').length - 3),
          endTime: this.searchTerms.date && (this.searchTerms.date[1] + '').slice(0, (this.searchTerms.date[0] + '').length - 3),
          id: this.searchTerms.user_id,
          companyId: this.searchTerms.user_id ? '' : this.searchTerms.company_id,
          type: 3,
          status: this.searchTerms.status
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tableData = res.data;
          this.tableLoading = false;
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      showDetails(row) {
        this.dialogVisible = true;
        this.personalData = row.detail
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1400px;
  margin: 0 auto;
  .header {
    @include flex-row(center, space-between);
    padding: 10px 0;

    div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
    }

    .el-select {
      padding: 0 8px;
      width: 180px;
    }

    .search-input {
      width: 240px;
    }

    .do-btn {
      @extend .bg-green;
      margin-left: 6px;
    }
  }
}
</style>
